<template>
	<view class="newsContainers_containers display_flex_bet">
		<view class="newsContainers_containers_left display_flex-center">
			<view class="newsContainers_containers_left_content">
				<view class="newsContainers_containers_left_content_info">
					<!-- NEWS -->
					新闻
				</view>
				<view class="newsContainers_containers_left_content_btn display_flex-center" @tap="goToNews()" style="cursor: pointer;">
					<view class="newsContainers_containers_left_content_btn_text">
						更多
					</view>
					<image src="@/static/rightArrow.png" class="newsContainers_containers_left_content_btn_img"></image>
				</view>
			</view>
		</view>
		<view class="newsContainers_containers_right">
			<view class="newsContainers_containers_right_item" style="cursor: pointer;" v-for="(item, index) in itemArr" :key="index" v-if='index<7' @tap="goNewsDetail(item)">
				<view class="newsContainers_containers_right_item_top">
					<text class="newsContainers_containers_right_item_top_time">{{item.createTime}}</text>
					<text class="newsContainers_containers_right_item_top_label">{{item.souceName}}</text>
				</view>
				<view class="newsContainers_containers_right_item_title text_overflow_2">
					{{item.title}}
				</view>
				<view class="newsContainers_containers_right_item_line">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'newsContainers',
		components: {

		},
		props: {
			selectPlanItem: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				
				itemArr: []
			};
		},
		mounted() {
            console.log(this.selectPlanItem)
			this.getgoodList()
			// #ifdef H5

			// #endif
		},
		methods: {
			goNewsDetail(item){
				uni.navigateTo({
					url: '/pages/news/detail?id='+item.id
				});
			},
			getgoodList() {
				this.itemArr = []
				this.$http.Post(`${this.$api.newsList}`, {
					goodId: this.selectPlanItem.id,
					pageNumber:1,
					pageSize:10
				}, (res) => {
					console.log(res)
					let data = res.content
                     data.forEach(item => {
                     	if(item.souce==1){
							item.souceName='主题'
						}else if(item.souce==2){
							item.souceName='艺术家'
						}else if(item.souce==3){
							item.souceName='门票'
						}else if(item.souce==4){
							item.souceName='商品'
						}
						this.itemArr.push(item)
                     })

					

				})
			},
			goToNews() {
				uni.navigateTo({
					url: '/pages/news/index'
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.newsContainers_containers {
		//bg_middle
		width: 100%;
		background-image: url("../../static/bg_middle.png");
		background-size: 100% 100%;

		&_left {
			width: 268rpx;
			height: 760rpx;
			background: rgba(0, 0, 0, 1);
			color: #fff;

			&_content {
				width: 100%;
				padding-left: 32rpx;

				&_info {
					font-size: 48rpx;
					line-height: 60rpx;
					font-weight: 700;
				}

				&_btn {
					width: 114rpx;
					height: 48rpx;
					border: 1px solid #fff;
					border-radius: 48rpx;
					margin-top: 8rpx;

					&_text {
						font-size: 24rpx;
						margin-right: 8rpx;
					}

					&_img {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		&_right {
			width: calc(100% - 268rpx);
			height: 760rpx;
			padding-left: 20rpx;
			padding-right: 32rpx;

			&_item:first-child {
				padding-top: 0rpx;
			}

			&_item {
				padding-top: 18rpx;

				&_top {
					line-height: 40rpx;

					&_time {
						font-size: 28rpx;
						color: rgba(51, 51, 51, 1);
					}

					&_label {
						font-size: 28rpx;
						margin-left: 20rpx;
						color: rgba(234, 11, 42, 1);
						font-weight: 700;
					}
				}

				&_title {
					margin-top: 6rpx;
					font-size: 28rpx;
					color: rgba(51, 51, 51, 1);
					line-height: 40rpx;
					font-weight: 700;
				}

				&_line {
					margin-top: 6rpx;
					width: 100%;
					height: 2rpx;
					background: rgba(0, 0, 0, 1);
				}
			}
		}
	}
</style>